<template>
	<view class="home">
		<view class="tabs_monitor">
			<view class="tabs_i" hover-class="tabs_i_acv" v-for="(i,index) in monitorArr" :key="index"
				@click="monitorFn(i.text)">
				<image class="img" :src="i.img" mode=""></image>
				<view class="text">
					<view class="">
						{{i.text}}
					</view>
				</view>
			</view>
			<view class="celouzd">
				<view class="celouzd_box" @click="zhonghduanAA">
					配置测流终端
				</view>
				<view class="celouzd_box" @click="zhonghduanBB">
					设置测段参数
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view>
				<text>人生若只如初见，何事秋风悲画扇</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				monitorArr: [{
						img: require('@/static/shezhi.png'),
						text: '计时计数器 (自动)'
					}, {
						img: require('@/static/nianj.png'),
						text: '计时计数器 (手动)'
					},
					{
						img: require('@/static/xinh.png'),
						text: '流量计算器 (点流速)'
					}, {
						img: require('@/static/celac.png'),
						text: '流量计算器 (信号数)'
					}, {
						img: require('@/static/shiyongshuom.png'),
						text: '测流记录表'
					}, {
						img: require('@/static/liusyi.png'),
						text: '填报水位流量(测站)'
					}, {
						img: require('@/static/liebiaoa.png'),
						text: '填报斗口水量(计量点)'
					}
				],
			}
		},
		onLoad(option) {

		},
		methods: {
			monitorFn(i) {
				if (i == '计时计数器 (自动)') {
					uni.navigateTo({
						url: '/pages/currentMeasuringCar/currentMeterList?toolName=' + '计时计数器(自动)' +
							'&currentMeterType=' + 0
					});
				}
				if (i == '流量计算器 (点流速)') {
					uni.navigateTo({
						url: '/pages/currentMeasuringCar/increaseList?toolName=' + '流量计算器(点流速)'
					});
				}
				if (i == '流量计算器 (信号数)') {
					uni.navigateTo({
						url: '/pages/currentMeasuringCar/currentMeterList?toolName=' + '流量计算器(信号数)'
					});
				}
				if (i == '测流记录表') {
					uni.navigateTo({
						url: '/pages/manualFlowMeasurement/measuringCurrentRecordSheet'
					});
					// this.show = true
					// uni.navigateTo({
					// 	url: '/pages/currentMeasuringCar/historicalRecord'
					// });
				}
			},
			// 弹窗
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			zhonghduanAA() {
				uni.navigateTo({
					url: '/pages/settings/cesuyi'
				});
			},
			zhonghduanBB() {
				uni.navigateTo({
					url: '/pages/settings/course'
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.celouzd {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.celouzd_box {
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			border: 1rpx solid #000;
			background-color: #e4ebef;
			color: #000;
			font-size: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	// 水情
	.tabs_monitor {
		padding: 30rpx;

		.tabs_i {
			margin-bottom: 35rpx;
			padding: 30rpx 40rpx;
			border-radius: 20rpx;
			text-align: center;
			// border: 3rpx solid #ffffff;
			// box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(98, 98, 98, 0.1);
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.img {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				width: 550rpx;
				color: #000000;
				font-size: 50rpx;
			}
		}

		.tabs_i_acv {
			background-color: #dcdcda;
		}
	}
</style>
<style>
	page {
		background-color: #f2f1f6;
	}
</style>